<template>
	<view class="order-item">
		<view class="order-item-header" @click="goDetail(orderItem)">
			<view class="header-left">
				{{ orderStatus(orderItem.orderStatus) }}
			</view>
			<view class="header-right">工单id：{{ orderItem.id }}</view>
		</view>
		<view class="order-item-content" @click="goDetail(orderItem)">
			<view :class="['left-sign', orderItem.isConnect == 1 ? 'connect-sign' : 'noConnect-sign']">
				<image class="sign-img" :src="getImageUrl(orderItem.isConnect == 1 ? 'connect' : 'noConnect')" mode="widthFix"></image>
				{{ orderItem.isConnect == 2 ? '拆除' : '跳接' }}
			</view>
			<view class="right-info">
				<view class="info-row">
					<view class="info-name">
						{{ orderItem.fromDeviceOrderInfo ? orderItem.fromDeviceOrderInfo.name : '' }}
						<text class="info-port" v-if="orderItem.fromDevicePortIndex != null">（端口{{ orderItem.fromDevicePortIndex }}）</text>
					</view>
					<view class="info-location">
						{{ orderItem.fromLocation }}
					</view>
				</view>
				<view class="info-row">
					<view class="info-name">
						{{ orderItem.toDeviceOrderInfo ? orderItem.toDeviceOrderInfo.name : '' }}
						<text class="info-port" v-if="orderItem.toDevicePortIndex != null">（端口{{ orderItem.toDevicePortIndex }}）</text>
					</view>
					<view class="info-location">
						{{ orderItem.toLocation }}
					</view>
				</view>
				<view class="info-line"></view>
			</view>
		</view>
		<view class="order-item-footer">
			<view class="footer-btn btn-execute" v-if="orderItem.orderStatus == 0" @click="toOperate(orderItem, 1)">执行</view>
			<view class="footer-btn btn-complete" v-if="orderItem.orderStatus == 1" @click="toOperate(orderItem, 2)">完成</view>
			<view class="footer-btn btn-delete" @click="toOperate(orderItem, 3)">删除</view>
		</view>
	</view>
</template>

<script setup>
import { execute, finish, delDeviceOrderPort } from '@/service/work-order.js';

const $props = defineProps({
	orderItem: {
		type: Object,
		default: () => ({})
	}
});
const $emit = defineEmits(['updateList']);

// 懒加载图片
const getImageUrl = (name) => {
	return `../../static/images/index/${name}.png`;
};

//工单状态
const orderStatus = (status) => {
	let statusText = '';
	switch (status) {
		case 0:
			statusText = '未执行';
			break;
		case 1:
			statusText = '执行中';
			break;
		case 2:
			statusText = '已完成';
			break;
	}
	return statusText;
};

//跳转详情
const goDetail = (row) => {
	uni.navigateTo({
		url: '/pages/work-order/detail?id=' + row.id
	});
};

//工单操作
const toOperate = (row, type) => {
	let str = type == 1 ? '执行' : type == 2 ? '完成' : '删除';
	uni.showModal({
		title: '提示',
		content: `是否确认${str}ID为“${row.id}”的工单？`,
		success: function (res) {
			if (res.confirm) {
				if (type == 1) {
					//执行
					execute(row),
						then(() => {
							$emit('updateList');
							uni.showToast({
								title: '工单执行成功，请操作实际工单任务',
								icon: 'none'
							});
						});
				} else if (type == 2) {
					//完成
					finish(row).then(() => {
						$emit('updateList');
						uni.showToast({
							title: '工单已完成！'
						});
					});
				} else if (type == 3) {
					//删除
					delDeviceOrderPort(row.id).then(() => {
						$emit('updateList');
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
					});
				}
			} else if (res.cancel) {
				console.log('已取消');
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.order-item {
	width: 100%;
	height: 268rpx;
	background: #ffffff;
	box-shadow: 0px 4rpx 4rpx 0px #dbdee6;
	border-radius: 8rpx;
	margin-bottom: 23rpx;
	overflow: hidden;
	.order-item-header {
		width: 100%;
		height: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.header-left {
			box-sizing: border-box;
			width: 78rpx;
			height: 100%;
			padding-left: 9rpx;
			background: #295bf5;
			border-radius: 6rpx 6rpx 0rpx 6rpx;
			font-size: 19rpx;
			color: #ffffff;
			line-height: 32rpx;
			position: relative;
			&::after {
				content: '';
				display: block;
				width: 9rpx;
				height: 30rpx;
				background: #295bf5;
				clip-path: polygon(0 0, 100% 100%, 0 100%, 0 0);
				position: absolute;
				right: -8rpx;
				bottom: 0;
			}
		}
		.header-right {
			box-sizing: border-box;
			width: 605rpx;
			height: 100%;
			padding-left: 13rpx;
			background: #eff3fe;
			border-radius: 0rpx 6rpx 0rpx 6rpx;
			font-size: 19rpx;
			color: #707b9b;
			line-height: 32rpx;
			position: relative;
			&::before {
				content: '';
				display: block;
				width: 9rpx;
				height: 30rpx;
				background: #eff3fe;
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
				position: absolute;
				left: -8rpx;
				top: 0;
			}
		}
	}
	.order-item-content {
		box-sizing: border-box;
		width: 100%;
		height: 175rpx;
		padding: 20rpx 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.left-sign {
			width: 61rpx;
			height: 69rpx;
			border-radius: 8rpx;
			font-size: 19rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 14rpx;
			position: relative;
			.sign-img {
				width: 32rpx;
				margin-bottom: 2rpx;
			}
		}
		.right-info {
			width: 550rpx;
			position: relative;
			.info-row {
				width: 100%;
				margin-bottom: 5rpx;
				.info-name,
				.info-location {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.info-name {
					font-size: 26rpx;
					font-weight: bold;
					color: #262d37;
					line-height: 35rpx;
					.info-port {
						font-size: 22rpx;
						font-weight: normal;
						color: #7e8ca0;
					}
				}
				.info-location {
					font-size: 17rpx;
					color: #7e8ca0;
					line-height: 35rpx;
				}
			}
			.info-line {
				width: 17rpx;
				height: 76rpx;
				border: 1rpx solid #b6d1fe;
				border-right-color: transparent;
				border-radius: 10rpx 0 0 10rpx;
				position: absolute;
				left: -28rpx;
				top: 18rpx;
				&::before,
				&::after {
					content: '';
					display: block;
					width: 6rpx;
					height: 6rpx;
					border-radius: 50%;
					background: #3e78f8;
					position: absolute;
					right: -3rpx;
				}
				&::before {
					top: -3rpx;
				}
				&::after {
					bottom: -3rpx;
				}
			}
		}
		.connect-sign {
			background-color: #fff5db;
			color: #eb9000;
		}
		.noConnect-sign {
			background-color: #ffe6e5;
			color: #f24d4d;
		}
	}
	.order-item-footer {
		box-sizing: border-box;
		width: 100%;
		height: calc(100% - 207rpx);
		margin: 0 auto;
		display: flex;
		position: relative;
		&::before {
			content: '';
			display: block;
			width: 649rpx;
			border-top: 1rpx dashed #0c71e2;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.footer-btn {
			flex: 1;
			width: auto;
			height: 100%;
			font-size: 23rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			&:hover {
				background-color: #f3f3f3;
			}
		}
		.btn-execute {
			color: #295bf5;
		}
		.btn-complete {
			color: #67c23a;
		}
		.btn-delete {
			color: #f24d4d;
		}
	}
}
</style>
